
// React元素==JSX表达式==虚拟DOM==React中写的标签
// 函数组件，就是一个普通的函数
// 组件名一定要首字母大写
// 一定要返回一个(且仅有一个)React元素
const Main = (props) => {
    // 条件渲染: {} && ?:
    // 循环渲染: map
    
    const list = [11,22,33,44,55];
    const newList = list.map(item=><li>{item}</li>);
    
    return (
        <div>
            <main>
                <section>
                    <h2>{props.title}</h2>
                    <ul>
                        {
                            props.data?.map(item=>{
                                return (
                                    <li>
                                        {item}
                                    </li>
                                )
                            })
                        }
                    </ul>
                    {/* <ul>
                        { newList }
                    </ul> */}
                    {/* <ul>
                        {
                            list.map(item=>(
                                <li>{item}</li>
                            ))
                        }
                        {
                            list.map(item=>{
                               return <li>{item}</li>
                            })
                        }
                    </ul> */}
                </section>
            </main>
            {/* {
                true && (
                    <footer>
                        { false? <h2>尾部</h2> : <span>1234</span>}
                        { 5>3 && <h2>尾部</h2>} 
                    </footer>
                )
            } */}
        </div>
    )
}
export default Main;


// component
// 先装React相关的插件，
// 执行rafce快捷方式，生成组件结构